<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>怪岛管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加博文</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-card shadow="never">
      <el-alert title="添加博文" type="info" :closable="false" center show-icon>
      </el-alert>

      <el-form class="form-box" :model="addForm" :rules="addFromRules" ref="addFormRef" label-position="top" label-width="100px">
        <el-tabs tab-position="left" v-model="tab_active">
          <el-tab-pane label="基础信息" name='base'>
            <el-form-item>
              <el-button type="primary" @click="setFromReset">重置内容</el-button>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="addForm.title" style="width:380px"></el-input>
            </el-form-item>
            <el-form-item label="署名" prop="summary">
              <el-input v-model="addForm.summary" style="width:380px"></el-input>
            </el-form-item>
            <el-form-item label="编号" prop="number">
              <el-input v-model="addForm.number" style="width:380px"></el-input>
            </el-form-item>
            <el-form-item label="上传封面图">
              <el-input v-model.trim="addForm.cover_img" placeholder="输入图片地址" style="width:180px;margin-bottom:15px"></el-input>
              <!-- <el-upload :action="uploadPic" :data="{pic_name:this.addForm.pic_name}" :file-list="pic_url" :limit="1" list-type="picture-card" :on-preview="upPicPreview" :headers="headerObj"
                :on-success="upPicSuccess" :on-remove="upPicRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog> -->
            </el-form-item>
            <el-form-item label="上传音乐">
              <!-- <el-input v-model="addForm.mic_name" placeholder="上传前请先输入音频名称" style="width:180px;margin-bottom:10px"></el-input> -->
              <el-input v-model.trim="addForm.bgm" placeholder="输入音频地址" style="width:180px;margin-bottom:10px"></el-input>
              <!-- <el-upload class="upload-demo" :data="{mic_name:this.addForm.mic_name}" :file-list="mic_url" style="width:380px" :action="uploadMic" :on-preview="upMicPreview" :headers="headerObj"
                :on-success="upMicSuccess" :on-remove="upMicRemove" :limit="1">
                <el-button size="small" type="primary">上传音乐</el-button>
              </el-upload> -->
            </el-form-item>
            <el-form-item label="博文状态">
              <el-switch v-model="addForm.status" active-color="#13ce66" inactive-color="#cccccc" active-text="发布" inactive-text="草稿" active-value="发布" inactive-value="草稿">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="nextTap">下一步</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="博文正文" name='blog'>
            <el-form-item prop="content">
              <!-- <quill-editor v-model="addForm.content" style="width:375px"></quill-editor> -->
              <Editor :content="addForm.content" @handleEditorChange="handleEditorChange"></Editor>
            </el-form-item>
            <el-button type="primary" class="upload-btn" @click="add('addFormRef')">{{submitText}}</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getBlogApi, sendBlogApi, editBlogApi } from '../../request/apis'
import Editor from './Editor'
export default {
  components: {
    Editor
  },
  data () {
    return {
      // activeIndex: 0,
      // 标识是新增博文还是修改博文
      is_new_or_edit: true,
      addFromRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        summary: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入编号', trigger: 'blur' }
        ],
        cover_img: [
          { required: true, message: '请上传封面图', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文本内容', trigger: 'change' }
        ]
      },
      addForm: {
        title: '',
        summary: '岛主',
        number: '000',
        cover_img: '',
        pic_name: '',
        bgm: '',
        mic_name: '',
        status: '发布',
        content: '',
        comments: []
      },
      editorHtml: '',
      // uploadPic: 'https://api.thunderup.cn/api/uploadpic',
      // uploadPic: 'http://127.0.0.1:5000/api/uploadpic',
      // uploadMic: 'https://api.thunderup.cn/api/uploadmusic',
      // dialogVisible: false,
      // dialogImageUrl: '',
      // headerObj: {
      //   Authorization: 'Bearer ' + window.localStorage.getItem('access_token')
      // },
      // upLoadFile: '',
      // pic_url: [],
      // mic_url: [],
      tab_active: 'base',
      submitText: '上传文章'
    }
  },
  async activated () {
    const id = this.$route.params.id
    if (id) {
      this.submitText = '修改文章'
      this.geBlogDetail(id)
    }
  },
  methods: {
    // upPicPreview (file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible = true
    // },
    // upPicSuccess (response, file, fileList) {
    //   if (response.meta.status === 200) {
    //     this.addForm.cover_img = response.data.file_url
    //     this.$message.success('上传图片成功')
    //   } else {
    //     this.$message.error('上传图片失败')
    //     this.dialogImageUrl = ''
    //   }
    //   if (response.meta.status === 403) {
    //     this.$message.error('身份信息过期请重新登录')
    //     return this.$router.push('/login')
    //   }
    // },
    // upPicRemove () {
    //   this.addForm.cover_img = ''
    // },
    // upMicSuccess (response, file, fileList) {
    //   if (response.meta.status === 200) {
    //     this.addForm.bgm = response.data.file_url
    //   } else {
    //     this.$message.error('上传文件失败')
    //   }
    // },
    // upMicRemove () {
    //   this.addForm.bgm = ''
    // },
    async add (formName) {
      this.addForm.content = this.editorHtml
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.is_new_or_edit) {
            const data = await sendBlogApi(this.addForm)
            if (data.meta.status === 200) {
              this.$message.success('发布成功')
              this.initData()
              this.$router.push('/bloglist')
            }
          } else {
            const data = await editBlogApi(this.addForm)
            if (data.meta.status === 200) {
              this.$message.success('修改成功')
              this.initData()
              this.$router.push('/bloglist')
            }
          }
        } else {
          return this.$message.error('表单验证失败！')
        }
      })
    },
    nextTap () {
      this.tab_active = 'blog'
    },
    async geBlogDetail (id) {
      this.is_new_or_edit = false
      const data = await getBlogApi({ params: { id } })
      this.addForm = data.data
      // const picUrl = data.data.cover_img.split('/')
      // const name = picUrl[picUrl.length - 1]
      // this.pic_url.push({ name, url: 'https://' + data.data.cover_img })
      // this.mic_url.push({ name: data.data.bgm })
    },
    handleEditorChange (editorHtml) {
      this.editorHtml = editorHtml
    },
    setFromReset() {
      Object.assign(this.$data.addForm, this.$options.data().addForm)
      this.is_new_or_edit = true
      this.editorHtml = ''
      this.tab_active = 'base'
      this.submitText = '上传文章'
    },
    initData () {
      Object.assign(this.$data.addForm, this.$options.data().addForm)
      this.is_new_or_edit = true
      this.tab_active = 'base'
      this.submitText = '上传文章'
    }
  }
}
</script>

<style lang="less" scoped>
.form-box {
  margin-top: 30px;
}
.upload-btn {
  margin-top: 15px;
}
</style>
